<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增产品溯源')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-traceability-add">
        <div class="row">

            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">[[#{traceabilityCode}]]：</label>
                    <div class="col-sm-8">
                        <input name="traceabilityCode" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">[[#{productionBatch}]]：</label>
                    <div class="col-sm-8">
                        <input name="productionBatch" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{productionDate}]]：</label>
                    <div class="col-sm-8">
                        <input type="text" class="time-input form-control" id="productionDate" th:placeholder="#{productionDate}" name="productionDate" />
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{executiveStandard}]]：</label>
                    <div class="col-sm-8">
                        <input name="executiveStandard" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{guaranteePeriod}]]：</label>
                    <div class="col-sm-8">
                        <input name="guaranteePeriod" class="form-control" type="text" th:placeholder="#{guaranteePeriodExample}">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{countryOfOrigin}]]：</label>
                    <div class="col-sm-8">
                        <input name="countryOfOrigin" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{productionQualification}]]：</label>
                    <div class="col-sm-8">
                        <input name="productionQualification" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{salesTerritory}]]：</label>
                    <div class="col-sm-8">
                        <input name="salesTerritory" class="form-control" type="text" th:placeholder="#{salesTerritoryExample}">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{serviceCall}]]：</label>
                    <div class="col-sm-8">
                        <input name="countryCode" class="input-line" type="number" maxlength="5" th:placeholder="#{countryCode}" style="width: 70px;">
                        <span>-</span>
                        <input name="phoneNumber" class="input-line" maxlength="11" type="number" th:placeholder="#{phoneNumber}" style="width: 120px;">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{serviceInfo}]]：</label>
                    <div class="col-sm-8">
                        <textarea name="serviceInfo" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{status}]]：</label>
                    <div class="col-sm-8">
                        <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
                            <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
                            <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">图片：</label>
                    <div class="col-sm-8">
                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-new thumbnail" style="width: 120px;">
                                <img th:src="@{/img/nopic.jpg}">
                            </div>
                            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 450px;"></div>
                            <div>
                                <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
                                <input type="file" id="img-file" accept="image/*" /></span>
                                <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                            </div>
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>建议图片大小100KB ~ 3M，文件格式：bmp, gif, jpg, jpeg, png</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jasny-bootstrap-js" />
<script th:inline="javascript">
    var prefix = ctx + "business/traceability"
    $("#form-traceability-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            //$.operate.save(prefix + "/add", $('#form-traceability-add').serialize());

            submitData(prefix + "/add", $('#form-traceability-add').serializeObject(), 1);
        }
    }

    $.fn.serializeObject = function()
    {
        var o = new FormData();
        var formArray = this.serializeArray();
        $.each(formArray, function() {

            o.append(this.name+'', (this.value || ''));
        });
        return o;
    };

    function submitData(url, formData, type) {
        var file = $('#img-file')[0].files[0];

        if (file == undefined || file == null) {
            $.modal.alertWarning("请选择图片");
            return;
        } else {
            var fileSize = parseInt(file.size / 1024); //KB
            if(fileSize > 1024 *3){
                $.modal.alertWarning("选择的文件大小："+fileSize+"KB，请控制图片的大小在100KB - 3M");
                return;
            }
        }
        formData.append('file', file);

        $.ajax({
            url: url,
            type: 'post',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                if(1 == type) {
                    $.operate.successCallback(result);
                } else {
                    //提交后不刷新清空；
                    if (result && result.code == 0) {
                        $.modal.msgSuccess(result.msg);

                        emptyFrom();
                    } else {
                        $.modal.alertError(result.msg);
                    }
                }
            }
        });
    }
</script>
</body>
</html>